<template>
	<div class="CompontensViews" :style="{ '--table-radio': tableRadio, '--draw-radio': drawRadio }">
		<!-- 头部搜索 -->
		<div class="right-content-title">
			<div class="btns">
				<el-button size="mini" v-show="styleOptionsValue != 3"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;margin-left: 10px;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini" v-show="styleOptionsValue != 3"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button>
			</div>
			<div class="left-select">
				<!-- 显示 -->
				<div class="selectView">
					<!-- <div class="selectViewLabel">
            {{ $t("message.bhView.label.style") }}
          </div>
          <el-select
            v-model="styleOptionsValue"
            :placeholder="$t('message.bhView.label.placeholderSearch')"
            class="select-ipt style-ipt"
            @change="styleFun"
          >
            <el-option
              v-for="item in styleOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select> -->
					<el-button size="mini" type="primary" class="select-btn" v-if="styleOptionsValue == 2"
						@click="(styleOptionsValue = 3), styleFun()">
						{{ $t("message.styleOptions.value1") }}
					</el-button>
					<el-button size="mini" type="primary" class="select-btn" v-if="styleOptionsValue == 3"
						@click="(styleOptionsValue = 2), styleFun()">
						{{ $t("message.styleOptions.value3") }}
					</el-button>
				</div>
				<!-- 开放分类 -->
				<div class="selectView">
					<div class="selectViewLabel">
						{{ $t("message.msView.label.openClass") }}
					</div>
					<el-select v-model="wrkClsCode" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt long-select-ipt" @change="changeWrkClsCodeFn

							" @focus="
								getWrkClsApi(
									type,
									leftTabelRow.pltCode,
									leftTabelRow.macCode,
									planPeriodCode
								)
								">
						<el-option v-for="item in WrkCls" :key="item.key" :label="item.label"
							:value="item.key"></el-option>
					</el-select>
				</div>

				<!-- 刷新 -->
				<el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
					<div class="refresh" @click="freshFn

						">
						<i class="iconfont">&#xe81f;</i>
						<!-- <span>刷新</span> -->
					</div>
				</el-tooltip>
				<!-- 3D viewer -->
				<!-- <div class="DViewer">
					<el-tooltip class="item" effect="dark" :content="$t('message.tooltip.title_2')" placement="top">
						<i class="iconfont" @click="modelClick">&#xe8e5;</i>
					</el-tooltip>
				</div> -->



				<el-tooltip class="item" effect="dark" content="計画" placement="top">
					<div class="DViewer">
						<i class="el-icon-document" @click="cpsClick1"></i>
					</div>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="結果" placement="top">
					<div class="DViewer">
						<i class="el-icon-document-checked" @click="cpsClick"></i>
					</div>
				</el-tooltip>


			</div>
			<div class="right-select">
				<!-- 计划表示时间 -->
				<div class="select-tab">
					<div class="select-tab-label">
						{{ $t("message.bhView.label.planningTime") }}
					</div>
					<el-select v-model="planPeriodCode" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-tab-ipt" @focus="getPlanPeriodApi" @change="changePlanPeriodCodeFn

							">
						<el-option v-for="item in planningTimeList" :key="item.key" :label="item.label"
							:value="item.key"></el-option>
					</el-select>
				</div>

				<div class="selectView" style="margin-left: 16px">
					<el-button size="mini" type="primary" class="select-btn" v-for="(item, index) in btn_list"
						:key="index" v-if="btn_list_index == index" @click="changeIndex(index)">
						{{ item.label }}
					</el-button>
				</div>
			</div>
		</div>
		<!--table -->
		<div class="tabel-view-wrapper">
			<MSTabel ref="MSTabel" :tableHeight="tableHeight" :prposTabelData="prposTabelData" :loading="loading"
				:tabelDataConfig="tabelDataConfig" @getMSTabelRow="getMSTabelRow"
				@ListenScrollGetData="ListenScrollGetData" v-if="loadFlag" :empty="empty"
				:rightViewFlag="rightViewFlag"></MSTabel>
		</div>
		<!-- 类型筛选 -->
		<div class="select-legend-view" v-show="styleOptionsValue != 3">
			<div class="select-legend">
				<!-- <el-radio v-model="radio" label="1">風船</el-radio> -->
				<el-radio v-model="radio" label="2">{{
					$t("message.tooltip.title_4")
				}}</el-radio>
			</div>
			<div class="select-legend">
				<!-- <el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(1)"><i class="el-icon-caret-top" style="text-align: center;"></i></el-button>
				<el-button size="mini"
					style="width: 24px !important;display: flex;justify-content: center;align-items: center;"
					@click="ViewFn(2)"><i class="el-icon-caret-bottom" style="text-align: center;"></i></el-button> -->
			</div>

		</div>
		<!-- cad -->
		<div class="CADView" v-show="styleOptionsValue != 3">
			<div id="LineEcharts" v-show="styleOptionsValue == 1"></div>
			<CadViewForMS v-show="styleOptionsValue == 2" ref="CadViewForMS" :isShow="styleOptionsValue == 2"
				@onMarkupSelected="onMarkupSelected" :isShowMarkups="radio" />
		</div>
		<!-- 3D Viewer -->
		<div class="Viewer" v-show="ViewerFlag">
			<!-- <iframe
				:src="towRsUrl"
				frameborder="0"
				ref="refed"
				style="width: 100%; height: 100%"
			></iframe>

			<div class="footer-lay">
				<button>
					{{ $t("message.public.close") }}
				</button>
			</div> -->
			<matterportView class="martter_view" :towRsUrl="towRsUrl" @onCloseClick="modelClick" />
		</div>

		<!-- 右侧信息框 -->
		<div class="right-Viewer" v-if="rightViewFlag">
			<rightViewTabs :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick" ref="rightViewTabs"
				:rightViewFlag="rightViewFlag">
			</rightViewTabs>
		</div>

		<div class="right-Viewer" v-if="rightViewFlag1">
			<rightViewTabs1 :tableSelectRow="tableSelectRow" @onCloseClick="cpsClick1" ref="rightViewTabs1"
				:rightViewFlag1="rightViewFlag1">
			</rightViewTabs1>
		</div>
	</div>
</template>

<script>
import $ from "jquery";
import MSTabel from "./MSTabel";
import CadViewForMS from "./CadViewForMS";
import { getLocalStorage } from "../../utils/storage";
import {
	getOfferData,
	getPlanPeriod,
	getWrkCls,
	getOfferHeader,
	getOfferHeaderObjctl
} from "../../api/api";
import eventBus from "../../eventBus/bus";
import matterportView from "./MSDialogCompontens/matterportView.vue";
import rightViewTabs from "./MSDialogCompontens/TabsCompontens.vue";
import rightViewTabs1 from "./MSDialogCompontens/TabsCompontens1.vue";
export default {
	props: ["leftTabelRow", "valuePlant"],
	name: "MSCompontens",
	data() {
		return {
			getOfferDataFlg: 0,
			MSTabelKey: 0,
			// 显示样式
			styleOptions: [
				{
					value: this.$t("message.styleOptions.value1"),
					id: 2,
				},
				{
					value: this.$t("message.styleOptions.value3"),
					id: 3,
				},
			],
			styleOptionsValue: 3,
			options: [],
			value: "",
			planPeriodCode: "",
			planPeriodCodeTemp: "",
			planningTimeList: [],
			planningTimeSelect: "",
			planningTimeSelectList: [],
			WrkCls: [],
			wrkClsCode: "",
			wrkClsCodeTemp: "",
			tableHeight: 778,
			prposTabelData: [], // tabel数据
			loading: false, // tabel加载loading
			pageIndex: 1,
			pageSize: 20,
			radio: "2",
			type: null,
			typeList: [
				{
					label: this.$t("message.msView.label.all"),
					type: 3,
				},
				{
					label: this.$t("message.msView.label.plan"),
					type: 1,
				},
				{
					label: this.$t("message.msView.label.actual"),
					type: 2,
				},
			],
			userName: getLocalStorage("userName"),
			tabelDataConfig: {},
			loadFlag: false,
			ViewerFlag: false,
			rightViewFlag: false,
			rightViewFlag1: false,
			empty: "",
			btn_list: [
				{
					label: this.$t("message.msView.label.all"),
					type: 3,
				},
				{
					label: this.$t("message.msView.label.plan"),
					type: 1,
				},
				{
					label: this.$t("message.msView.label.actual"),
					type: 2,
				},
			],
			btn_list_index: 0,
			btn_list_value: "",
			filterPlanKey: "",

			towRsUrl: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ",

			tableSelectRow: null,

			tableRadio: "50%",
			nTableRadio: 0.5,
			drawRadio: "50%",
		};
	},
	components: {
		MSTabel,
		CadViewForMS,
		rightViewTabs,
		rightViewTabs1,
		matterportView,
	},
	watch: {},
	methods: {

		//	图画框放大缩小
		ViewFn(type) {
			console.log(this.tableRadio, type, '123');
			if ((this.tableRadio == '20.00%' && type == 1) || (this.tableRadio == '80.00%' && type == 2)) {
				return
			}
			if (type == 1) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn1(this.tableRadio);
					this.drawRadio = this.currentFn(this.drawRadio);
					this.nTableRadio += 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() - 75

					this.$refs.CadViewForMS.loadSvg();
				})
			}
			if (type == 2) {
				this.$nextTick(function () {
					this.tableRadio = this.currentFn(this.tableRadio);
					this.drawRadio = this.currentFn1(this.drawRadio);
					this.nTableRadio -= 0.2;
					this.tableHeight =
						$(".tabel-view-wrapper").height() + 75

					this.$refs.CadViewForMS.loadSvg();
				})
			}
		},
		currentFn(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue += 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},
		currentFn1(val) {
			// 将当前值转换为数字
			let currentValue = parseFloat(val.replace('%', ''));
			// 增加 10%
			currentValue -= 10;

			// 转换回字符串并添加 '%'
			return currentValue.toFixed(2) + '%';
		},

		changePlanPeriodCodeFn() {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.planPeriodCodeTemp = this.planPeriodCode;

				this.$store.commit(
					'changeplanPeriodCode',
					this.planPeriodCode
				);
				this.getOfferDataApi(
					this.type,
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				)

			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		freshFn(freshFnFlg = true) {
			if (freshFnFlg) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			let Fn = () => {
				this.getOfferDataApi(
					this.type,
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				)
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		changeWrkClsCodeFn() {

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.wrkClsCodeTemp = this.wrkClsCode;

				this.getOfferDataApi(
					this.type,
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				)
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		//布局样式筛选
		styleFun() {
			let _this = this;
			this.$store.commit("changeMSStyleCode", this.styleOptionsValue);
			if (this.styleOptionsValue == 3) {
				this.$nextTick(function () {
					this.tableHeight = $(".CompontensViews").height() - 50;
				});
				this.tableRadio = '100%';
				this.drawRadio = '0%';
				this.nTableRadio = 0.5;
				return;
			} else {
				this.tableRadio = '50%';
				this.drawRadio = '50%';
				this.nTableRadio = 0.5;
				this.$refs.CadViewForMS.loadSvg();
			}
			//切换布局样式如果是折线图 默认绘制第一条数据
			if (this.styleOptionsValue == 1) {
				return;
			}
			setTimeout(function () {
				_this.$nextTick(function () {
					_this.tableHeight =
						$(".CompontensViews").height() * this.nTableRadio - 40;
				});
			});
		},
		//监听滚动事件 动态懒加载数据
		ListenScrollGetData() {
			this.pageIndex++;
		},
		//获取右上表格某一行数据
		getMSTabelRow(row) {
			console.log("getMSTabelRow   123234325435", row);
			this.tableSelectRow = row;
		},
		//右下角图纸中markup选中回调
		onMarkupSelected(e) {
			this.$refs.MSTabel.setCurrentByR(e);
		},

		updateSvgAndMarkups() {
			// 根据
			console.log(this.leftTabelRow);
			this.$refs.CadViewForMS.loadSvgDataByRow(
				this.leftTabelRow.macCode, //this.leftTabelRow.macCode,
				"colorOptionsValue", //this.colorOptionsValue,
				"LifeAssBaseVaule", //this.LifeAssBaseVaule,
				this.leftTabelRow.pltCode, //this.leftTabelRow.pltCode,

				this.leftTabelRow.macName, //this.macName,
				"fasd", //this.valuePlant,
				this.leftTabelRow.macType, //this.leftTabelRow.macType,
				this.styleOptionsValue != 2
			);
		},

		//获取要约表格
		getOfferDataApi(
			type,
			pltCode,
			dmgCode,
			wrkClsCode,
			planPeriodCode,
			pageIndex,
			pageSize,
			Num = false
		) {
			this.getOfferDataFlg++
			if (this.getOfferDataFlg != 1) {
				return
			}
			setTimeout(() => {
				this.getOfferDataFlg = 0;
			}, 500);

			let dataJson = {
				type: type,
				pltCode: pltCode,
				dmgCode: dmgCode,
				wrkClsCode:
					wrkClsCode == "" || wrkClsCode == null ? 0 : wrkClsCode,
				planPeriodCode:
					planPeriodCode == "" || planPeriodCode == null
						? 120
						: planPeriodCode,
				pageIndex: pageIndex,
				pageSize: pageSize,
			};
			this.loading = true;
			getOfferData(dataJson)
				.then((res) => {
					!res.data.data
						? (this.empty = "No Data")
						: (this.empty = "");
					this.loading = false;
					if (res.data.code == -1) {
						this.prposTabelData = [];
						this.$alert(res.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
						return;
					}
					if (res.data.code != 0) {
						this.prposTabelData = [];
						eventBus.$emit("isGetNewForMSC");
						return;
					}
					this.$emit("getNumberData", res.data.count);
					this.MSTabelKey++
					this.prposTabelData = res.data.data;
					setTimeout(() => {
						eventBus.$emit('SET_B', Num)
					}, 300);
				})
				.catch(() => {
					this.prposTabelData = [];
					this.loading = false;
				});
		},
		//获取计划表示时间
		getPlanPeriodApi() {
			getPlanPeriod().then((res) => {
				if (res.data.code != 0) {
					this.planningTimeList = [];
					return;
				}
				this.planningTimeList = res.data.data;
				// this.planPeriodCode = this.planningTimeList.slice(-1).key
			});
		},
		// 获取开放分类
		getWrkClsApi(type, pltCode, dmgCode, planPeriodCode) {
			let dataJson = {
				type: type,
				pltCode: pltCode,
				dmgCode: dmgCode,
				planPeriodCode: planPeriodCode,
			};
			getWrkCls(dataJson).then((res) => {
				// console.log(res, "获取开放分类");
				if (res.data.code != 0) {
					this.WrkCls = [];
					return;
				}
				this.WrkCls = res.data.data;
				// this.wrkClsCode = this.WrkCls[0].key
			});
		},
		async getOfferHeaderObjctlApi() {
			let dataJson = {
				type: 2,
				cntlName: "Spread3",
				formID: "AM33000",
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			};
			let res = await getOfferHeaderObjctl(dataJson);
			return res.data.data;
		},
		//获取 目视表头设置(要约与详细)
		getOfferHeaderApi() {
			let dataJson = {
				type: 1,
				account: this.userName,
				formID: "AM330002",
			};
			getOfferHeader(dataJson).then(async (res) => {
				this.loadFlag = true;
				if (res.data.code != 0) {
					return;
				}
				this.tabelDataConfig = res.data.data;

				let titles = await this.getOfferHeaderObjctlApi();
				Object.keys(this.tabelDataConfig).forEach((item, index) => {
					this.tabelDataConfig[item].title = titles[index];
				})
				this.getOfferDataApi(
					this.type,
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				);
			});
		},
		modelClick() {

			//初始监听状态
			if (!this.ViewerFlag) {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}

			let Fn = () => {

				this.rightViewFlag1 = false;
				this.rightViewFlag = false;
				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				if (!_this.ViewerFlag) {
					$(".CADView").animate(
						{ width: parentWidth / 2 },
						300,
						function () {
							console.log("在这里重绘");
							_this.ViewerFlag = !_this.ViewerFlag;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth / 2 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.ViewerFlag = !_this.ViewerFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}

				eventBus.$emit("resetTabelStyleForMS");
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		refresh() {
			this.getOfferDataApi(
				this.type,
				this.leftTabelRow.pltCode,
				this.leftTabelRow.macCode,
				this.wrkClsCode,
				this.planPeriodCode,
				1,
				1000
			)
		},
		//结果
		cpsClick(isShowSave = true) {
			// if (this.rightViewFlag1) {
			// 	this.cpsClick1()
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
			}
			//初始监听状态
			// if (this.rightViewFlag && isShowSave) {

			// }

			let Fn = () => {
				//初始监听状态
				this.$store.commit('reSetIsStop');
				// this.$store.commit("changeMSC_Info", {})
				// eventBus.$emit("triggerLeftTabelClick", {macName:this.$store.state.macName})

				// this.refresh();

				this.ViewerFlag = false;
				this.rightViewFlag1 = false;
				localStorage.setItem("E_MST", '')
				setTimeout(() => {
					eventBus.$emit("goNextOfCenterTable");
					// eventBus.$emit("isGetNewForMSC");

					// this.$refs.MSTabel.setCurrentByR(0);
				}, 500);
				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				if (!_this.rightViewFlag) {
					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						function () {
							console.log("在这里重绘");
							_this.rightViewFlag = !_this.rightViewFlag;
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.rightViewFlag = !_this.rightViewFlag;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMS");
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		//式样
		cpsClick1(isShowSave = true) {
			// if (this.rightViewFlag) {
			// 	this.cpsClick()
			// }
			if (!isShowSave) {
				this.$store.commit("changeIsCurrentNext", true);
			} else {
				eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			}
			//初始监听状态
			// if (this.rightViewFlag1 && isShowSave) {
			// }

			let Fn = () => {
				//初始监听状态
				// this.$store.commit('reSetIsStop');
				// this.refresh();

				// setTimeout(() => {
				// 	eventBus.$emit("reClickActive")
				// }, 301);

				this.rightViewFlag = false;
				this.ViewerFlag = false;
				let _this = this;
				let parentWidth = $(".CompontensViews").width();
				if (!_this.rightViewFlag1) {
					// setTimeout(() => {
					// eventBus.$emit("isGetInfo")
					// }, 301);

					$(".CADView").animate(
						{ width: parentWidth - 716 },
						300,
						() => {
							console.log("在这里重绘");
							_this.rightViewFlag1 = !_this.rightViewFlag1;
							setTimeout(() => {
								console.log('11111111111111111111111111111');
								this.$refs.rightViewTabs1.getOfferComboxApi();
							}, 350);
							_this.updateSvgAndMarkups();
						}
					);
					$(".tabel-view-wrapper").animate(
						{ width: parentWidth - 716 },
						300
					);
					$(".select-legend-view").animate(
						{ width: parentWidth - 716 },
						300
					);
				} else {
					_this.rightViewFlag1 = !_this.rightViewFlag1;
					$(".CADView").animate({ width: parentWidth }, 300, function () {
						console.log("在这里重绘");
						_this.updateSvgAndMarkups();
					});
					$(".tabel-view-wrapper").animate({ width: parentWidth }, 300);
					$(".select-legend-view").animate({ width: parentWidth }, 300);
				}
				eventBus.$emit("resetTabelStyleForMS");
			}
			/**
			 * 2。  记录当前函数。
			 */

			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}

		},
		changeIndex(index) {
			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				this.btn_list_index = index + 1;
				if (this.btn_list_index > 2) {
					this.btn_list_index = 0;
				}
				this.type = this.btn_list[this.btn_list_index].type;
				this.$store.commit("changeMsTypeCode", this.type);
				this.getOfferDataApi(
					this.type,
					this.leftTabelRow.pltCode,
					this.leftTabelRow.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				);
			}
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);
				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}


		},
	},
	created() {
		getPlanPeriod().then((res) => {
			if (res.data.code != 0) {
				this.planningTimeList = [];
				return;
			}
			this.planningTimeList = res.data.data;
			this.$store.state.planPeriodCode
				? (this.planPeriodCode = this.$store.state.planPeriodCode)
				: (this.planPeriodCode =
					this.planningTimeList.slice(-1)[0].key);

			this.planPeriodCodeTemp = this.planPeriodCode;
		});
		this.getOfferHeaderApi();
		setTimeout(() => {
			this.getOfferDataApi(
				this.type,
				this.leftTabelRow.pltCode,
				this.leftTabelRow.macCode,
				this.wrkClsCode,
				this.planPeriodCode,
				1,
				1000
			);
		}, 500);

		this.$watch(
			"leftTabelRow",
			function (newV, oldV) {
				console.log(newV, "----------");
				if (JSON.stringify(newV) === JSON.stringify(oldV)) {
					return;
				}

				if (this.rightViewFlag) {
					// this.cpsClick();
					this.updateSvgAndMarkups();
				}

				if (this.ViewerFlag) {
					// this.modelClick();
					this.updateSvgAndMarkups();
				}

				this.towRsUrl = newV.note
					? newV.note
					: "https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ";
				this.$emit("getNumberData", 0);
				this.type = this.$store.state.msTypeCode;
				this.btn_list.forEach((item, index) => {
					if (item.type == this.type) {
						this.btn_list_index = index;
					}
				});

				this.wrkClsCode = "";
				this.wrkClsCodeTemp = "";
				this.getOfferDataApi(
					this.type,
					newV.pltCode,
					newV.macCode,
					this.wrkClsCode,
					this.planPeriodCode,
					1,
					1000
				);
				this.$nextTick(function () {
					this.updateSvgAndMarkups();
				});
				// this.updateSvgAndMarkups();
			},
			{ deep: true, immediate: true }
		);

		this.styleOptionsValue = this.$store.state.msStyleCode;

		// 宽高比
		let windowWhRadio =
			document.documentElement.clientWidth /
			document.documentElement.clientHeight;
		if (windowWhRadio > 1.78) {
			this.tableRadio = "50%";
			this.drawRadio = "50%";
			this.nTableRadio = 0.5;
		} else {
			this.tableRadio = "40%";
			this.drawRadio = "60%";
			this.nTableRadio = 0.4;
		}
	},
	mounted() {
		let _this = this;

		eventBus.$on("LoadMSTabelData", (DMG = false) => {
			_this.getOfferHeaderApi();
			this.getOfferDataApi(
				this.type,
				this.leftTabelRow.pltCode,
				this.leftTabelRow.macCode,
				this.wrkClsCode,
				this.planPeriodCode,
				1,
				1000,
				DMG
			);
		});
		this.$nextTick(function () {
			window.addEventListener(
				"resize",
				() => {
					return (() => {
						_this.styleOptionsValue == 2
							? (_this.tableHeight =
								$(".CompontensViews").height() *
								this.nTableRadio -
								40)
							: (_this.tableHeight =
								$(".CompontensViews").height() - 50);
					})();
				},
				false
			);
			this.styleOptionsValue == 2
				? (this.tableHeight =
					$(".CompontensViews").height() * this.nTableRadio - 40)
				: (this.tableHeight = $(".CompontensViews").height() - 50);
		});
		//	仅刷新，不监听
		eventBus.$on("refreshForMSC", () => {
			this.freshFn(false);
		})


		//  如果保存报错则-切换之前的搜索状态
		eventBus.$on("backParamsForLeftView", () => {
			this.wrkClsCode = this.wrkClsCodeTemp;
			this.planPeriodCode = this.planPeriodCodeTemp;
		})

	},
	beforeDestroy() {
		eventBus.$off("backParamsForLeftView");
		eventBus.$off("LoadMSTabelData");
		window.removeEventListener("resize", function () { });
	},
};
</script>
<style lang="scss" scoped>
.CompontensViews {
	width: 100%;
	height: 100%;
	position: relative;

	.Viewer,
	.right-Viewer {
		position: absolute;
		width: 700px;
		height: calc(100% - 60px);
		background: #fff;
		right: 0;
		top: 56px;
		z-index: 66;

		.get-url-view {
			position: absolute;
			z-index: 666;
			bottom: 10px;
			left: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 80%;
		}
	}

	.Viewer {
		width: 50%;
	}

	.right-content-title {
		padding: 16px 0 16px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.selectView {
				margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-btn {
					min-width: 100px;
					height: 24px;
					line-height: 0;
					font-size: 14px;
					// background: #106ebe;
					// color: #fff;
					// border: 1px solid #eaeaeb;
					// border-radius: 4px;
					cursor: pointer;
				}

				.selectViewLabel {
					line-height: 24px;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}

				.select-ipt {
					width: 112px;
					height: 24px;

					::v-deep .el-input__inner {
						width: 112px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}

				.long-select-ipt {
					width: 220px;

					::v-deep .el-input__inner {
						width: 220px;
					}
				}

				.style-ipt {
					width: 95px;

					::v-deep .el-input__inner {
						width: 95px;
					}
				}
			}

			.refresh {
				min-width: 40px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.iconfont {
					margin: 0 4px;
					font-size: 17px;
					height: 24px;
					line-height: 24px;
				}
			}

			.DViewer {
				margin-left: 8px;
				min-width: 40px;
				height: 24px;
				// border-radius: 4px;
				// border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;

				// cursor: pointer;
				.iconfont {
					font-size: 20px;
					margin: 0 4px;
					color: #2a7190;
					cursor: pointer;
				}

				.iconfont,
				.el-icon-document {
					font-size: 20px;
					margin: 0 4px;
					color: #2a7190;
					cursor: pointer;
				}
			}
		}

		.right-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.date-btn {
				min-width: 66px;
				height: 24px;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #eaeaeb;
				margin: 0 4px;
			}

			.date-btn-active {
				background: #106ebe;
				color: #fff;
			}

			.select-tab {
				margin-left: 18px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select-tab-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}
		}
	}

	.select-btn {
		min-width: 100px;
		height: 24px;
		line-height: 0;
		font-size: 14px;
		// background: #106ebe;
		// color: #fff;
		// border: 1px solid #eaeaeb;
		// border-radius: 4px;
		cursor: pointer;
	}

	.select-legend-view {
		width: 100%;
		padding: 10px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-legend {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			// margin-right: 24px;

			.select-legend--ipt {
				::v-deep .el-input__inner {
					width: 120px;
					height: 24px;
					color: rgba(0, 0, 0, 0.65);
					background: #f8f8f8;
				}

				::v-deep .el-input__icon {
					line-height: 24px;
				}
			}
		}

		.select-legend-color {
			margin-right: 16px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: 100px;
			position: relative;

			.select-legend-color-box {
				width: 24px;
				height: 24px;
				border-radius: 2px;
				border: 1px solid #d9d9d9;
				margin-right: 8px;
				cursor: pointer;
			}
		}

		.messageColor {
			margin-left: 8px;
			position: absolute;
			right: 16px;
		}
	}

	.CADView {
		width: 100%;
		height: calc(var(--draw-radio) - 40px);
		position: relative;
		background: #fff;
		border: 1px solid #c3c3c3;
		border-top: 3px solid #c3c3c3;

		.iconfont-view {
			position: absolute;
			width: 100%;
			height: 4px;
			left: 0;
			top: -2px;
			opacity: 0;
			transition: 0.5s;
			z-index: 10;
			cursor: pointer;
		}

		#LineEcharts {
			width: 100%;
			height: calc(100% - 80px);
			margin-top: 20px;
		}

		.dragIcon {
			position: absolute;
			top: -22px;
			left: 50%;
			transform: translate(-50%);
			font-size: 30px;
		}

		.iconfont-view:hover {
			opacity: 1;
		}

		.rightCadView {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 9;
		}
	}
}

.martter_view {
	background-color: #ff00ff;
	width: 100%;
	height: 100%;
}

.tabel-view-wrapper {
	height: calc(var(--table-radio) - 40px);
	overflow: hidden;
}

::v-deep .el-table--border td,
::v-deep .el-table--border th,
::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 0 none;
}

.el-icon-document-checked {
	font-size: 20px;
	margin: 0 4px;
	color: #2a7190;
	cursor: pointer;
}

.btns {
	display: flex;
	position: absolute;
	right: 130px;
	top: -36px;

	button {
		height: 24px !important;
	}
}
</style>
